<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<LINK rel=stylesheet type=text/css href="../css/style.css">
<script type="text/javascript" src="../dist/jquery/jquery-1.8.3.js"></script>
<html>
<head>
    <title>列表</title>
</head>
<BODY>
<DIV id=header class=wrap>
    <DIV id=logo><IMG src="../images/logo.gif"></DIV></DIV>
<DIV id=navbar class=wrap>
    <DL class="search clearfix">
       <%-- <FORM id=sform method=post action=house!houseList.action>--%>
        <FORM id=sform>
            <DT>
                <UL>
                    <LI class=bold>房屋信息</LI>
                    <LI>标题：<INPUT class=text type=text name=htitle value="区">
                        <LABEL class=ui-blue><INPUT  value=搜索房屋 type=button ></LABEL>
                    </LI></UL></DT>
            <DD>
                <UL>
                    <LI class=first>价格 </LI>
                    <LI><SELECT name=hprice>
                        <OPTION selected value="30">不限</OPTION>
                        <OPTION value=0-100>100元以下</OPTION>
                        <OPTION value=100-200>100元—200元</OPTION>
                        <OPTION value=200-1000000>200元以上</OPTION>
                    </SELECT> </LI></UL></DD>
            <DD>
                <UL>
                    <LI class=first>面积 </LI>
                    <LI><SELECT name=hfloorage>
                        <OPTION selected value="60">不限</OPTION>
                        <OPTION value=0-40>40以下</OPTION>
                        <OPTION value=40-500>40-500</OPTION>
                        <OPTION value=500-1000000>500以上</OPTION>
                    </SELECT> </LI></UL></DD>
            <DD>
                <UL>
                    <LI class=first>区位置</LI>
                    <LI><SELECT class=text name=street.district.did>
                        <%--<OPTION selected value=1004>海淀区</OPTION>--%>
                            </SELECT>
                    </LI></UL></DD>
            <DD>
                <UL>
                    <LI class=first>街道位置</LI>
                    <LI><SELECT id=street name=street.sid>
                            <%--<OPTION selected value="">不限</OPTION>
                            <OPTION value=1000>知春路</OPTION>
                            <OPTION value=1001>中关村大街</OPTION>
                            <OPTION value=1002>学院路</OPTION>
                            <OPTION value=1003>朝阳路</OPTION>--%>
                        </SELECT> </LI></UL></DD>

            <DD>
                <UL>
                    <LI class=first>房型</LI>
                    <LI><SELECT name=type.tid>
                           <%-- <OPTION selected value="">不限</OPTION>
                            <OPTION value=1000>一室一厅</OPTION>
                            <OPTION value=1001>一室两厅</OPTION>
                            <OPTION value=1002>两室一厅</OPTION>
                            <OPTION value=1003>两室两厅</OPTION>--%>
                        </SELECT>
                    </LI></UL></DD>

           </FORM></DL></DIV>
<DIV class="main wrap">
    <TABLE class=house-list>
        <TBODY>
        <%--<TR>
            <TD class=house-thumb><span><A href="details.htm" target="_blank"><img src="../images/thumb_house.gif" width="100" height="75" alt=""></a></span></TD>
            <TD>
                <DL>
                    <DT><A href="details.htm" target="_blank">尽快回家</A></DT>
                    <DD>海淀区中关村大街,346平米<BR>联系方式：3456 </DD></DL></TD>
            <TD class=house-type>一室一厅</TD>
            <TD class=house-price><SPAN>346.0</SPAN>元/月</TD></TR>--%>

        <TR>无租房信息</TR></TBODY></TABLE>
    <DIV class=pager>
        <UL>
            <LI class=current><A href="#">首页</A></LI>
            <LI><A href="#">上一页</A></LI>
            <LI><A href="#">下一页</A></LI>
            <LI><A href="#">末页</A></LI></UL><SPAN
            class=total>1/2页</SPAN> </DIV></DIV>
<DIV id=footer class=wrap>
    <DL>
        <DT>云和租房 © 2010 云和 京ICP证1000001号</DT>
        <DD>关于我们 · 联系方式 · 意见反馈 · 帮助中心</DD></DL></DIV></BODY></HTML>



<script type="text/javascript">

    /*
    返回结果houseList
    * */
    houseList();
     function houseList(){
         //$("#sform").live('mouseover',function () {
         $("input[type=button]").live('click',function () {
             console.log('5555555');
             console.log($("input[name=htitle]").val());
             console.log($("select[name=hprice]").val());
             console.log($("select[name=hfloorage]").val());
             console.log($("select[name='street.district.did']").val());
             console.log($("select[name='street.sid']").val());
             console.log($("select[name='type.tid']").val());

                 console.log('5555552222');
                 $.ajax({
                     type:'post',
                     url:'house!houseList.action',
                     data:{
                         htitle:$("input[name=htitle]").val(),
                         hprice:$("select[name=hprice]").val(),
                         hfloorage:$("select[name=hfloorage]").val(),
                         street_district_did:$("select[name='street.district.did']").val(),
                         street_sid:$("select[name='street.sid']").val(),
                         type_tid:$("select[name='type.tid']").val()
                     },
                     dataType:'json',
                     success:function (data) {
                         console.log('555555333333');
                         //console.log(data);
                         var str4='';
                         
                         $.each(data,function (index,obj) {
                             console.log(obj);
                             console.log(obj.htitle);

                             str4+="<tr>";
                             str4+="<TD class=house-thumb>";
                             str4+="<span>";
                             str4+="<a href=\"details.htm\" target=\"_blank\">";
                             str4+="<img src=\"../images/thumb_house.gif\" width=\"100\" height=\"75\" alt=\"图片加载失败\">";
                             str4+="</a>";
                             str4+="</span>";
                             str4+="</TD>";
                             str4+="<TD>";
                             str4+="<DL>";
                             str4+="<DT>";
                             str4+="<A href=\"details.htm\" target=\"_blank\">"+obj.htitle+"</A>";
                             str4+="</DT>";
                             str4+="<DD>"+obj.street.district.dname+obj.street.sname+","+obj.hfloorage+"平米<BR>联系方式："+obj.hcontact +"</DD>";
                             str4+="</DL>";
                             str4+="</TD>";
                             str4+="<TD class=house-type>"+obj.type.tname+"</TD>";
                             str4+="<TD class=house-price><SPAN>"+obj.hprice+"</SPAN>元/月</TD>";
                             str4+="</tr>";

                         });

                         //console.log(str4);
                         $("tbody").empty();
                         $("tbody").append(str4);
                         //console.log($("TBODY").html());
                     }
                 });
             });
     }
    /**
     * 房屋类型的下拉列表
     */
    selectType();
    function selectType(){
        $(function () {
            console.log('1111111');
            $.ajax({
                type:'post',
                url:'type!typeList.action',
                dataType:'json',
                success:function (data) {
                    var str1='<option value=0>房屋类型不限</option>';
                    $.each(data,function (index,obj) {
                        str1+='<option value='+obj.tid+'>'+obj.tname+'</option>';
                    });
                    $("select[name='type.tid']").empty();
                    $("select[name='type.tid']").append(str1);
                    /* console.log($("select[name='type.tid']").html());*/
                }
            });
        });
    }

    /**
     * 区县的下拉列表
     */
    selectDistrict();
    function  selectDistrict() {
        $(function () {
            console.log('2222222');
            $.ajax({
                type:'post',
                url:'district!districtList.action',
                dataType:'json',
                success:function (data) {
                    var str2='<option value=0>区县不限</option>';
                    $.each(data,function (index,obj) {
                        str2+='<option value='+obj.did+'>'+obj.dname+obj.did+'</option>';
                    });
                    $("select[name='street.district.did']").empty();
                    $("select[name='street.district.did']").append(str2);
                    /* console.log($("select[name='street.district.did']").html());*/
                }
            });
        });
    }

    /**
     * 街道的下拉列表
     */
    var did2str=-1;
    selectStreet();
    function selectStreet(){
        console.log('333333');
        console.log('333333====='+did2str);
        $(function () {
            $.ajax({
                type:'post',
                url:'street!streetList.action',
                data:{
                    sid:did2str/*实际是did,无法直接使用did的模型驱动*/
                },
                dataType:'json',
                success:function (data) {
                    var str3='<option value=0>街道不限</option>';
                    $.each(data,function (index,obj) {
                        str3+='<option value='+obj.sid+'>'+obj.sname+obj.district.did+obj.district.dname+'</option>';
                        /*str3+='<option value='+obj.sid+'>'+obj.sname+'</option>';*/
                    });
                    $("select[name='street.sid']").empty();
                    $("select[name='street.sid']").append(str3);
                    /* console.log($("select[name='street.sid']").html());*/
                }
            });
        });
    }

    /*
        select-option的属性selected=selected
    * */

    $(function () {
        console.log('4444441111');
        $("select[name='street.district.did']").live('click',function () {
            console.log('44444422222');
            var did2val=$("select[name='street.district.did']").val();
            $("select[name='street.district.did'] option[value!="+did2val+"]").removeAttr('selected');
            $("select[name='street.district.did'] option[value="+did2val+"]").attr('selected','selected');
            did2str=$("select[name='street.district.did'] option[selected=selected]").val();
            selectStreet();
        });
    });


</script>

